<template>
<div>
  <searchBox @searchChange="searchChange" />
    <div class="gva-table-box">
      <lineChart ref="totalUser" :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"> </lineChart>
    </div>
    <div class="gva-table-box">
    <div class="gva-btn-list"><el-text class="mx-1" size="large">详细数据</el-text></div>
        <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        row-key="ID"
        :data="tableData"
        border
      >
      
        <el-table-column v-for="item in headList" :key="item.id"
          align="left"
          :label="item.label"
          :prop="item.prop"
        />
        <!-- <el-table-column
          align="left"
          label="新增"
          prop="8RgLwNR29Mifj87op6Eb_new_remain"
        />
        <el-table-column
          align="left"
          label="次留"
        > -->
        <!-- <template #default="scope">
          <span v-if="scope.row.time_remain != 0">
            {{ scope.row.time_remain +'  ('+(scope.row.time_remain/scope.row.total * 100).toFixed(2)+'%)' }}
          </span>
          <span v-else>
            -
          </span>
        </template> -->
        <!-- </el-table-column> -->

      </el-table>
    </div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import lineChart from '../../components/echarts/lineChart.vue';
import searchBox from '../../components/search/searchBox.vue';
import type { TabsPaneContext } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'
import { sumByKey } from '../../utils/fmtData'
import {
        getHugeList
} from '@/api/openApi'


// =========== 表格控制部分 ===========
const tableData = ref([])
const searchInfo = ref({})

const route = useRoute()
const plan_id = route.query.id

var searchChange = function(date) {
  searchInfo.value = date
  getTableData()
}



const chartData = ref({
  xAxis: [],
  series: [],
  legend: [],
  title: '留存数据'
})

const headList = ref([])
const chartList = ref([])
const getTableData = async() => {

  const table = await getHugeList({ type:"cronAbTestData",...searchInfo.value,params:"1",add_params:plan_id })
  if (table.code == 0) {
    let arr = []
    if (table.data.result.length > 0) {
      headList.value = table.data.result
      headList.value.forEach((it,index)=>{
        if (index >= 1 && it.label.indexOf('新增') != -1){
          chartList.value.push(it.prop)
          chartData.value.legend.push(it.label)
          chartData.value.series.push({
            name: it.label,
            type: 'line',
            data: []
          })
        }
      })
    }
    chartData.value.xAxis = []
    if(table.data.list.length > 0){
      table.data.list.sort((a, b) => new Date(a.date) - new Date(b.date));
      table.data.list.forEach((item,index)=>{
        let result = JSON.parse(item.response)
        chartData.value.xAxis.push(result.date)
        chartList.value.forEach((its,indexs)=>{
          chartData.value.series[indexs].data.push(result[its])
        })
        arr.push({
          date: item.date,
          ...result
        })
      })
      arr = sumByKey(arr,'date')
      tableData.value = arr
    }else{
      tableData.value = []
    }
   
  }
}


</script>